<template>
  <div
    class="app_sidebar_layout"
    :style="{
      height: layoutHeight,
      paddingLeft: sidebarOption.width
    }"
  >
    <div
      class="sidebar"
      id="siderbarBox"
      v-horizontalDrag="sidebarOption.width"
      :style="{
        width: sidebarOption.width
      }"
    >
      <slot name="sidebar"/>
      <div class="dragbar" ref="resizebar"></div>
    </div>
    <div class="main">
      <slot name="main"/>
      <div class="main_mask"></div>
    </div>
  </div>
</template>

<script>
import { setLocalStorage, getLocalStorage } from '@/utils/localStorage'
import { mapGetters } from 'vuex'
const sideBarWidthKey = 'APP_SIDEBAR_WIDTH'
function getSiderbarWidth() {
  let width = document.getElementById('siderbarBox').clientWidth
  console.log('getSiderbarWidth', width)
  return width
}
export default {
  name: 'AppSidebarLayout',
  props: {
    layoutHeight: {
      type: String,
      default: 'calc(100vh - 50px)'
    }
  },
  data() {
    return {
      resizebar: null,
      sidebarOptionWidth: '500px',
      sidebarOption: {
        width: '500px'
      }
    }
  },
  watch: {
    'sidebarOption.width': (val) => {
      setLocalStorage(sideBarWidthKey, val)
    },

    'hisActivedIndex': {
      handler(val) {
        console.log('handler', val)
        let siderbarWidth = this.sidebarOption.width
        console.log('siderbarWidth', siderbarWidth)
        if (val == 2) {
          let siderbarWidth = getSiderbarWidth()
          if (siderbarWidth < 546) {
            this.sidebarOption.width = '546px'
          }
        }
      }
    }
    // 'hisActivedIndex': (val) => {
    //   if (val == 2) {
    //     let siderbarWidth = getSiderbarWidth()
    //     if (siderbarWidth < 480) {

    //     }
    //   }
    // }
  },
  computed: {
    ...mapGetters(['hisActivedIndex'])
  },
  created() {
    this.$nextTick(() => {
      const sw = getLocalStorage(sideBarWidthKey)
      if (sw) {
        this.sidebarOption.width = sw
      }
      if (this.sidebarOption.width < '400px') {
        this.sidebarOption.width = '400px'
      }
    })
  },
  methods: {
    // ...
  }
}
</script>

<style lang="scss" scoped>
.app_sidebar_layout{
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 500px;
  .sidebar{
    width: 500px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    // overflow-y: auto;
    border-right: solid 1px #e5e5e5;
    .dragbar{
      width: 3px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 5;
      // background-color: #f00;
      cursor: ew-resize;
      &:hover{
        background-color: rgba(0, 163, 233, 0.192);
      }
      &:active{
        background-color: #00A4E9;
      }
    }
  }
  .main{
    position: relative;
    background-color: #fff;
    .main_mask{
      display: none;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
  }
}
</style>
